<template>
	<view class="tan" v-if="showCha">
		<view class="tan-con">
			<view class="uni-form-item">
				<view class="title">
					vin：
				</view>
				<view class="uni_name">
					<input class="uni-input" v-model="otherVin" placeholder="请输入您想查询的车辆vin" />
				</view>
			</view>
			<view class="bottom">
				<view class="close" @click="closeTan">取消</view>
				<view class="confirm" @click="confirmTan">确认</view>
			</view>
		</view>
	</view>
	<view class="Zhu">
		<!-- 顶部个人信息 -->
		<view class="bg-white">
			<view class="flex padding info" @tap="setUser">
				<view class="flex">
					<view class="padding-lr-xs">
						<!-- style="background-image:url(https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132);" -->
						<view class="cu-avatar lg round">
							<image style="width:80rpx;height: 80rpx;border-radius: 50%;" :src="avatarUrl"
								class="refreshIcon"></image>
						</view>
					</view>
					<view class="padding-xs text-xl text-black">
						<view> {{ userName }}</view>
						<view class="cu-tag round line-green sm">使用电车减排</view>
					</view>
				</view>
				<view><text class="cuIcon-right"></text></view>
			</view>
		</view>
		<view class="dengLuWrap">
			<view class="dengLu" v-if="!isLogin" @tap='loginIn'>
				登录
			</view>
		</view>

		<view class="cu-list_it margin-top-sm padding-lr-xs radius-lg-bottom">
			<view class="cu-item_lover">

				<text>我的爱车</text>
				<!-- <text>车辆列表</text> -->
			</view>
			<view class="cu-item_lover_bom" @click="openCar">
				<image class="cu_ai_che" src="../../static/images/aiche.jpg" mode=""></image>
				<view>

					<view class="ai_che_text2">车架号</view>
					<view class="">
						vin:{{ userInfo.vin }}
					</view>
				</view>
				<view class="right">
					<!-- 添加车辆 -->
					<text class="cuIcon-add"></text>
				</view>
			</view>
		</view>
		<!-- bind:onSuccess="driverSuccess" -->
		<!-- <ocr-navigator @onSuccess="driverSuccess"   certificateType="drivingLicense" selectedOptions="{{['plateNum','vehicleType','owner']}}">
  <button type="primary">行驶证识别</button>
</ocr-navigator> --> <!---->
		<!-- 基本数据 -->
		<view class="cu-list grid col-4 no-border padding-lr-xs radius-lg-bottom">
			<view class="cu-item">
				<view class="text-black text-bold text-xxl">
					0
				</view>
				<text>优惠券</text>
			</view>
			<view class="cu-item">
				<view class="text-black text-bold text-xxl">
					0
				</view>
				<text>权益卡</text>
			</view>
			<view class="cu-item">
				<view class="text-black text-bold text-xxl">
					0
				</view>
				<text>保修卡</text>
			</view>
			<view class="cu-item">
				<view class="text-black text-bold text-xxl">
					0
				</view>
				<text>收据</text>
			</view>
		</view>
		<!-- 助力/推荐/邀请 -->
		<!-- <view class="margin-top-sm padding-lr-xs">
	    <view class="bg-brown light radius-lg shadow-blur">
	      <view class="flex padding-tb-sm padding-lr-sm justify-between">
	        <view class="padding-xs">
	          <view>9.9元开通超级会员最高可省￥40</view>
	        </view>
	        <view class="">
	          <view class="cu-btn round bg-black">开通会员</view>
	        </view>
	      </view>
	    </view>
	  </view> -->

		<view class="cu-list grid col-3 no-border text-black  padding-bottom radius-lg-bottom">
			<!-- :bindtap="item.bindtap" -->
			<view class="cu-item" v-for="(item, index) in iconList" :key="index" @tap="bindZan(item)">
				<view :class="['cuIcon-' + item.icon, 'text-' + item.color, 'text-shadow']" style="font-size: 56rpx;">
					<view class="cu-tag badge" v-if="item.badge != 0">
						<block v-if="item.badge != 1">{{ item.badge > 99 ? "99+" : item.badge }}</block>
					</view>
				</view>
				<text>{{ item.name }}</text>
			</view>
		</view>




		<view class="margin-top-sm padding-lr-xs">
			<view class="bg-white light radius-lg shadow-blur">
				<!-- 	      <view class="flex padding-tb-sm padding-lr-sm justify-between">
	         <view class="padding-xs">
	          <view class="text-xl text-black">惊喜连连·洁净一秋</view>
	          <view class="padding-top-xs">洗车来优惠<text class="text-red text-bold"> 6.6折 </text><text class="cuIcon-roundrightfill text-red"></text></view>
	        </view> 
	        <view class="">
	          <view class="cu-btn round bg-gradual-pinknew margin-top-sm">6折优惠</view>
	        </view>
	      </view> -->
			</view>
		</view>
		<!-- 其他功能 -->
		<view class="cu-bar  margin-top grid col-4 no-border bg-white radius-lg-top">
			<view class="action">
				<text class="text-xl">我的充电</text>
			</view>
		</view>
		<view class="cu-list grid col-4 no-border text-black  padding-bottom radius-lg-bottom">
			<view class="cu-item" v-for="(item, index) in iconOtherList" :key="index" @tap="bindZan(item)">
				<view :class="['cuIcon-' + item.icon, 'text-' + item.color, 'text-shadow']" style="font-size: 56rpx;">
					<view class="cu-tag badge" v-if="item.badge != 0">
						<block v-if="item.badge != 1">{{ item.badge > 99 ? "99+" : item.badge }}</block>
					</view>
				</view>
				<text>{{ item.name }}</text>
			</view>
		</view>

	</view>


</template>

<script setup>
	import {
		onMounted,
		ref,
		defineProps,
		watch,
		reactive,
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		RSAencrypt,
		RSAdecrypt
	} from "../../utils/rsa.js"
	let otherVin = ref('')
	let showCha = ref(false)
	const isDialog = ref(false)
	const showDialog = ref(false)
	const inputDialog = ref();

	const confirmTan = () => {
		showCha.value = false
		//  跳转页面
		uni.navigateTo({
			url: "../healthy/healthy?otherVin=" + otherVin.value
		})

	}
	const closeTan = () => {
		showCha.value = false
	}
	const userInfo = ref({})
	const userName = ref('个人信息设置')
	const avatarUrl = ref(
		'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'
	)
	let isLogin = uni.getStorageSync('isLogin')
	onMounted(() => {
		console.log(inputDialog.value, 'inputDialog');
		isLogin = uni.getStorageSync('isLogin')
		if (uni.getStorageSync('userName')) {
			userName.value = uni.getStorageSync('userName')
		}
		console.log('触发了', uni.getStorageSync('avatar'))
		if (uni.getStorageSync('avatar')) {
			avatarUrl.value = uni.getStorageSync('avatar')
		}

	})
	onLoad(() => {
		isLogin = uni.getStorageSync('isLogin')
		console.log('触页面dd')
		if (uni.getStorageSync('userName')) {
			userName.value = uni.getStorageSync('userName')
		}

		// uni.setStorageSync('avatar', result)

		if (uni.getStorageSync('avatar')) {
			avatarUrl.value = uni.getStorageSync('avatar')
		}
	})



	onShow(() => {
		if (uni.getStorageSync('loading') && uni.getStorageSync('loading') != null) {
			uni.showLoading({
				title: '图片下载中'
			});
			setTimeout(() => {
				uni.hideLoading()
			}, 2000)
			uni.setStorageSync('loading',null)
		}
		isLogin = uni.getStorageSync('isLogin')
		console.log('触发页面dd')
		if (uni.getStorageSync('userName')) {
			userName.value = uni.getStorageSync('userName')
		}
		if (uni.getStorageSync('avatar')) {
			avatarUrl.value = uni.getStorageSync('avatar')
		}

		getInfo()
	})

	const loginIn = () => {
		// if (uni.getStorageSync('isLogin') == true) {} else {
		uni.reLaunch({
			url: '/pages/login/login'
		})
		// }
	}
	const getInfo = () => {
		console.log(uni.getStorageSync('openid'), '加密前的openid')
		let deOpenId = RSAencrypt(uni.getStorageSync('openid'))
		// let dcOpenId = RSAdecrypt(deOpenId)

		uni.request({
			url: 'https://www.chargesystem.cn/charge4gv2/wechat/getUserInfo', // 你的登录API地址
			method: 'GET',
			data: {
				openid: deOpenId,
			},
			success: (res) => {
				console.log(res, uni.getStorageSync('openid'), '我的页面')
				if (res.data.code == 200) {

					userInfo.value = res.data.result
					// console.log(res.data.result.vin, 'res')
					if (res.data.result.vin) {
						uni.setStorageSync('vin', res.data.result.vin);
					}
				} else {
					uni.removeStorageSync('vin')
				}
			},
			fail: () => {
				uni.removeStorageSync('vin')
				uni.showToast({
					title: '请求失败',
					icon: 'none'
				});
			}
		});
	}
	const setUser = () => {
		let data = {
			title: 'hello',
			id: 1
		}
		uni.navigateTo({
			url: `../setUser/setUser?data=` + encodeURIComponent(JSON.stringify(data))
		})
	}
	const openCar = () => {
		uni.navigateTo({
			url: `../loveCar/loveCar`
		})
	}


	let iconList = reactive([{
			icon: 'moneybagfill',
			color: 'blue',
			badge: 0,
			id: 5,
			name: '电池健康',
			bindtap: "bindZan"
		}, {
			icon: 'presentfill',
			color: 'red',
			badge: 0,
			name: '查询其他车辆报告',
			id: 8,
			bindtap: "bindZan"
		}, {
			icon: 'formfill',
			color: 'purple',
			badge: 0,
			id: 9,
			name: '我的车辆列表',
			bindtap: "showResource"
		}
		// ,{
		// 	icon: 'shopfill',
		// 	color: 'green',
		// 	badge: 0,
		// 	id: 1,
		// 	name: '返修/售后',
		// 	bindtap: "bindPoint"
		// }
	])

	let iconOtherList = reactive([{
		id: 1,
		icon: 'location',
		color: 'blue',
		badge: 0,
		name: '地址管理'
	}, {
		id: 2,
		icon: 'service',
		color: 'blue',
		badge: 0,
		name: '电话客服',
		bindtap: "bindZan"
	}, {
		id: 3,
		icon: 'mark',
		color: 'blue',
		badge: 0,
		name: '在线客服',
		bindtap: "showResource"
	}, {
		id: 4,
		icon: 'mail',
		color: 'blue',
		badge: 0,
		name: '退出登录',
		bindtap: "bindCollect"
	}])
	// {
	// 	id: 5,
	// 	icon: 'settings',
	// 	color: 'blue',
	// 	badge: 0,
	// 	name: '电池健康',
	// 	bindtap: "bindZan"
	// }
	const driverSuccess = (item) => {
		console.log(item, 'ttttttttttttt')
	}
	const bindZan = (item) => {
		if (item.id === 5) {
			console.log(uni.getStorageSync('vin'), 'uni.getStorageSync')
			if (!uni.getStorageSync('vin')) {
				uni.showModal({
					title: '提示',
					content: '请您先绑定车辆vin,再查看电池健康报告!',
					success: function(res) {},
				});
			} else {
				uni.navigateTo({
					url: "../healthy/healthy"
				})
			}
		} else if (item.id == 4) {
			uni.showModal({
				title: '提示',
				content: '确定退出登录吗?',
				success: function(res) {
					if (res.confirm) {
						uni.removeStorageSync('isLogin')
						uni.removeStorageSync('vin')

						uni.showToast({
							title: '退出成功',
							icon: "success",
							duration: 2000,
						});
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				},
			});

		} else if (item.id == 8) {
			showCha.value = true
		} else if (item.id == 9) {
			uni.navigateTo({
				url: "../loveCar/carList"
			})

		}

	}
</script>

<style>
	.cuIcon-add {
		font-size: 20px;
		color: #07c160;
	}

	.tan {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.1);
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.uni-form-item {
		display: flex;
		margin: 40px 20px 30px 20px;
		font-size: 28rpx;
	}

	.confirm {
		height: 45px;
		width: 50%;
		box-sizing: border-box;
		color: #576b95;
		font-weight: 600;
		font-size: 32rpx;
		line-height: 45px;
		text-align: center;
		border-left: solid 2px #f5f5f5;
	}

	.uni-input {}

	.uni_name {
		width: 85%;
		border-bottom: solid 1px #999;


	}

	.close {
		height: 45px;
		width: 50%;
		box-sizing: border-box;
		color: #000;
		font-weight: 600;
		font-size: 32rpx;
		text-align: center;
		line-height: 45px;

	}

	.bottom {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		border-top: solid 2px #f5f5f5;
	}

	.tan-con {
		z-index: 1000;
		position: absolute;
		height: 280rpx;
		width: 70%;
		color: #333;
		border-radius: 26rpx;
		background-color: #fff;


	}

	.info {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cu-list_it {
		background-color: #fff;
		border-radius: 20px;
		margin-bottom: 30rpx;
	}

	.cu-item_lover {
		display: flex;
		justify-content: space-between;
		line-height: 40rpx;
		padding: 20rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.cu-item_lover_bom {
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		margin: 0 20rpx;
		align-items: center;
	}

	.cu_ai_che {
		width: 160rpx;
		height: 100rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.ai_che_text1 {
		font-size: 24rpx;
		color: #ccc;
		margin-bottom: 16rpx;
	}

	.ai_che_text2 {
		font-size: 24rpx;
		/* background-color:#a1c5f0; */
		color: #333;
	}

	.img_right {
		width: 26rpx;
		height: 26rpx;
	}

	.ocr-wrapper {
		margin: 40rpx auto;
		width: 375rpx;
	}

	.intro {
		margin: 40rpx;
	}

	.dengLuWrap {
		height: 80rpx;
		width: 100%;
		background-color: #fff;
	}

	.dengLu {
		margin: 0 auto;
		width: 200rpx;
		border-radius: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #07c160;
		color: #fff;

	}
</style>